<template>
  <div class="search">
    <van-search
      v-model.trim="kwds"
      show-action
      shape="round"
      background="#2EA6F2"
      placeholder="请输入搜索关键词"
      @clear="onCancel"
    >
      <template #action>
        <div class="search-btn" @click="goBack">取消</div>
      </template>
    </van-search>
    <section class="search-outer">
      <div class="search-container">
        <section v-show="isShow === 0" class="tip"/>
        <van-loading v-show="isShow === 1" color="#1989fa" size="20" class="search-loading">加载中...</van-loading>
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <ListItem v-for="(item,index) in list" :key="index" :list="item" :kwds="kwds"/>
        </van-list>
      </div>
    </section>
  </div>
</template>

<script>
import _ from 'lodash'
import { selPolicyList } from '../../api/article'
import ListItem from '../../components/ListItem/ListItem'

export default {
  name: 'Search',
  components: {
    ListItem
  },
  data() {
    return {
      isShow: 0,
      activeName: '',
      container: null,
      kwds: '',
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      error: false,
      page: 1, // 分页
      rows: 10 // 每页条数
    }
  },
  watch: {
    kwds(newValue) {
      this.kwds = newValue
      if (newValue === '') {
        this.list = []
      } else {
        this.debouncedFetchData(newValue)
      }
    }
  },
  created() {
    this.debouncedFetchData = _.debounce(this.fetchData, 1000, false)
  },
  mounted() {
  },
  methods: {
    onCancel() {
      this.kwds = ''
      this.isShow = 0
      this.list = []
    },
    goBack() {
      this.kwds = ''
      this.isShow = 0
      this.list = []
      this.$router.back()
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false
      this.page = 1				// 分页数赋值为1
      this.list = []					// 清空数组
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态

      this.loading = true
      this.onLoad()
    },
    onLoad() {
      const { kwds } = this
      this.page++
      this.fetchData(kwds)
    },
    async fetchData(newValue) {
      this.isShow = 1
      if (this.refreshing) {
        this.list = []
        this.refreshing = false
      }

      const { page, rows } = this

      const params = { name: newValue, page, rows }

      const { code, data } = await selPolicyList(params)

      if (code === 0) {
        this.list.push(...data.records)
        // 加载状态结束
        if (this.error) {
          this.error = false
        }
        this.loading = false
        // 如果list长度大于等于总数据条数,数据全部加载完成
        if (this.list.length >= data.total) {
          this.finished = true
        }

        this.isShow = 0
      } else {
        // 加载状态结束
        this.loading = false
        this.error = true
        this.isShow = 0
        this.page = 0
      }
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.search {
  height: 100%;

  .van-search {
    background-color: #70A0EC !important;
    padding: 6px 0 6px 10px;

    /deep/ .search-btn{
      color: #FFFFFF;
    }

  }

  .search-outer {
    position: fixed;
    top: 46px;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;

    .search-container {
      height: 100%;

      .search-loading {
        text-align: center;
        padding: 15px 0;
        box-sizing: border-box;
      }

      .van-pull-refresh {
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>
